import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux, Route, Link } from 'dva/router';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Divider, Tag, Table, Pagination, Spin, Upload
    , AutoComplete
} from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import styles from './style.less';


const { Description } = DescriptionList;
const FormItem = Form.Item;
const confirm = Modal.confirm;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
/*
  渠道管理的渠道维护界面
*/
let token = sessionStorage.getItem("token");
let tableListDataSource = [];
const channelState = ["未审核", "通过", "否决"]

@connect(({ channel }) => ({
    channel,
}))
@Form.create()
export default class OperationAnalysisList extends PureComponent {
    state = {
        dataTimeFlag: false,
        modalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        dataTime: [],
        startTime: '',
        endTime: '',
    };

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'channel/fetchChannel',
            payload: {
                offset: 0,
                limit: 10,
            },
        });
    }

    handleChangeTime = (dates, dateString) => {
        this.setState({
            dataTime: dateString,
            startTime: dates[0],
            endTime: dates[1],
            dataTimeFlag: false,
        })
    }

    handleSearch = (e) => {
        // e.preventDefault();
        const { dispatch, form } = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            const values = {
                offset: 0,
                limit: 10,
                ...fieldsValue,
                createTimeBegin: this.state.startTime,
                createTimeEnd: this.state.endTime,
            };
            this.setState({
                formValues: values,
            });
            dispatch({
                type: 'channel/fetchChannel',
                payload: values,
            });
        });
    };

    //重置
    handleFormReset = () => {
        const { form, dispatch } = this.props;
        form.resetFields();
        this.setState({
            formValues: {},
            dataTimeFlag: true,
        });
        dispatch({
            type: 'channel/fetchChannel',
            payload: {
                offset: 0,
                limit: 10,
            }
        });
    };

    handleSetState = (record) => {
        const { dispatch } = this.props;
        confirm({
            title: `你确定要${record.state == '0' ? '打开' : '关闭'}吗?`,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type: 'channel/updateChannelState',
                    payload: {
                        id: record.id,
                        state: record.state == '0' ? 1 : 0
                    },
                    callback: () => {
                        dispatch({
                            type: 'channel/fetchChannel',
                            payload: {
                                offset: 0,
                                limit: 10,
                            },
                        });
                    },
                });
            },
        });
    }


    renderSimpleForm() {
        const { getFieldDecorator } = this.props.form;
        const { dispatch } = this.props
        const onValidateForm = () => {
            dispatch(routerRedux.push('/channel/channel-form'));
        };
        return (
            <Form layout="vertical"  >
                <Row gutter={16}>
                    <Col lg={6} md={12} sm={24}>
                        <FormItem label="经销商名称">
                            {getFieldDecorator('dealerName')(<Input placeholder="请输入" />)}
                        </FormItem>
                    </Col>
                    <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                        <FormItem label="审核状态">
                            {getFieldDecorator('verifyState')(
                                <Select placeholder="请选择" style={{ width: '100%' }}>
                                    <Option value="0">未审核</Option>
                                    <Option value="1">已审核</Option>
                                    <Option value="2">已否决</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                        <FormItem label="创建时间">
                            {getFieldDecorator('createTime')(
                                <div>
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        allowClear={true}
                                        showToday={true}
                                        onChange={this.handleChangeTime}
                                        value={[
                                            this.state.dataTimeFlag ? null : this.state.startTime,
                                            this.state.dataTimeFlag ? null : this.state.endTime
                                        ]}
                                        showTime={{ hideDisabledOptions: true }}
                                        format="YYYY-MM-DD HH:mm:ss"
                                    />
                                </div>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col lg={6} md={12} sm={24}>
                    </Col>
                    <Col md={18} sm={24}>
                        <span className={styles.submitButtons}>
                            <Button type="primary" onClick={this.handleSearch}>
                                查询
                        </Button>
                            <Button style={{ marginLeft: 10 }} onClick={this.handleFormReset}>
                                重置
                        </Button>
                        </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    handleStandardTableChange = (e) => {
        // e.preventDefault();
        const { dispatch, form } = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            const values = {
                offset: (e.current - 1) * e.pageSize,
                limit: e.pageSize,
                ...fieldsValue,
                createTimeBegin: this.state.startTime,
                createTimeEnd: this.state.endTime,
            };
            this.setState({
                formValues: values,
            });
            dispatch({
                type: 'channel/fetchChannel',
                payload: values,
            });
        });
        // this.props.dispatch({
        //     type: 'channel/fetchChannel',
        //     payload: { offset: (e.current - 1) * e.pageSize, limit: e.pageSize },
        // });
    }

    columns = [{
        title: '经销商编号',
        dataIndex: 'dealerNo',
        key: 'dealerNo',
    }, {
        title: '经销商名称',
        dataIndex: 'dealerName',
        key: 'dealerName',
    }, {
        title: '负责人',
        dataIndex: 'leader',
        key: 'leader',
    }, {
        title: '联系电话',
        dataIndex: 'phone',
        key: 'phone',
    }, {
        title: '状态',
        dataIndex: 'verifyState',
        key: 'verifyState',
        render(val) {
            switch (val) {
                case 0:
                    return <Tag color="red">{channelState[val]}</Tag>
                case 1:
                    return <Tag color="green">{channelState[val]}</Tag>
                case 2:
                    return <Tag color="#919191">{channelState[val]}</Tag>
            }
        },
    }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '操作',
        dataIndex: 'id',
        key: 'id',
        render: (text, record) => (
            //0:未激活；1：正常；2：已启动；3：已暂停
            <Fragment>
                <Link to={`/risk1/operationAnalysisDetails?id=${record.id}&state=1`}>详情</Link>
                {/* {record.state == '0' && record.verifyState == '1' ?
                    <Fragment>
                        <Divider type="vertical" />
                        <a onClick={() => this.handleSetState(record)}>打开</a>
                    </Fragment>
                    : null
                }
                {record.state == '1' ?
                    <Fragment><Divider type="vertical" />
                        <a onClick={() => this.handleSetState(record)}>关闭</a>
                    </Fragment>
                    : null
                } */}
            </Fragment>
        )
    }];

    render() {
        const { channel: { channelList, channelLoading, channelPage } } = this.props
        const { dispatch } = this.props
        return (
            <PageHeaderLayout title="站长管理">
                {/* {
                JSON.stringify(channelList)
            } */}
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderSimpleForm()}
                        </div>
                        <Table
                            dataSource={channelList}
                            pagination={channelPage}
                            columns={this.columns}
                            loading={channelLoading}
                            rowKey="id"
                            onChange={this.handleStandardTableChange}
                        />
                    </div>
                </Card>

            </PageHeaderLayout>
        );
    }
}
